<template>
    <div class="opinionCollection">
        <template v-if="!isSuccess">
            <div class="opinionDescription">
                <span>
                    <b>意见征集</b>
                    <img style="width: 24px;" src="./icon.png" alt="">
                </span>
                <p>
                  为提高“电力安全生产“十五五”行动计划编制透明度和社会参与度，坚持开门编计划、有效凝聚各方共识、倾听各方意见、汇集各方智慧，把加强顶层设计和坚持问计于民统一起来，现面向社会公开征集意见建议，欢迎大家围绕电力安全生产、网络安全、工程建设、电力系统安全风险及应对策略、安全监管、科技创新等方面建言献策。意见建议可以是严谨的系统阐述，也可以是简短的真知灼见。对收集到的意见建议，我们将认真研究、充分吸纳。
                </p>
            </div>
            <table class="pcTable" border>
                <tr>
                    <th class="label"><span>*</span>姓名</th>
                    <td><a-input v-model="ruleForm.dlaqyjzjXm" /></td>
                    <th class="label"><span>*</span>电话号码</th>
                    <td><a-input v-model="ruleForm.dlaqyjzjSj" /></td>
                </tr>
                <tr>
                    <th class="label"><span></span>单位</th>
                    <td><a-input v-model="ruleForm.dlaqyjzjDw" /></td>
                    <th class="label"><span></span>职务/职称</th>
                    <td><a-input v-model="ruleForm.dlaqyjzjZwzc" /></td>
                </tr>
                <tr>
                    <th class="label"><span>*</span>类别</th>
                    <th colspan="3" style="padding: 0 10px;">
                        <a-radio-group v-model="ruleForm.dlaqyjzjLb" name="radioGroup">
                            <a-radio value="重大政策">重大政策</a-radio>
                            <a-radio value="重大技术">重大技术</a-radio>
                            <a-radio value="重大改革举措">重大改革举措</a-radio>
                        </a-radio-group>
                    </th>
                </tr>
                <tr>
                    <th class="label"><span>*</span>标题</th>
                    <th colspan="3" style="padding: 0 10px;">
                        <a-input v-model="ruleForm.dlaqyjzjBt" />
                    </th>
                </tr>
                <tr>
                    <th class="label"><span>*</span>意见建议</th>
                    <th colspan="3" style="padding: 10px;">
                        <a-input class="dlaqyjzjJy" v-model="ruleForm.dlaqyjzjJy" type="textarea" placeholder="内容字数不超过1000字" />
                    </th>
                </tr>
            </table>
            <table class="mobileTable">
                <tr>
                    <th class="label"><span>*</span>姓名</th>
                    <td><a-input v-model="ruleForm.dlaqyjzjXm" /></td>
                </tr>
                <tr>
                    <th class="label"><span>*</span>电话号码</th>
                    <td><a-input v-model="ruleForm.dlaqyjzjSj" /></td>
                </tr>
                <tr>
                    <th class="label"><span></span>单位</th>
                    <td><a-input v-model="ruleForm.dlaqyjzjDw" /></td>
                </tr>
                <tr>
                    <th class="label"><span></span>职务/职称</th>
                    <td><a-input v-model="ruleForm.dlaqyjzjZwzc" /></td>
                </tr>
                <tr>
                    <th class="label"><span>*</span>类别</th>
                    <td style="padding: 0 10px;">
                        <a-radio-group v-model="ruleForm.dlaqyjzjLb" name="radioGroup">
                            <a-radio value="重大政策">重大政策</a-radio>
                            <a-radio value="重大技术">重大技术</a-radio>
                            <a-radio value="重大改革举措">重大改革举措</a-radio>
                        </a-radio-group>
                    </td>
                </tr>
                <tr>
                    <th class="label"><span>*</span>标题</th>
                    <td style="padding: 0 10px;">
                        <a-input v-model="ruleForm.dlaqyjzjBt" />
                    </td>
                </tr>
                <tr>
                    <th class="label"><span>*</span>意见建议</th>
                    <td style="padding: 10px;">
                        <a-input class="dlaqyjzjJy" v-model="ruleForm.dlaqyjzjJy" type="textarea" placeholder="内容字数不超过1000字" />
                    </td>
                </tr>
            </table>
            <div class="submit" @click="handleSubmit">
                <span>提交</span>
            </div>
        </template>
        <template v-else>
            <div class="success">
                <img src="@/assets/img/chenggong.png" alt="">
                <p>提交成功！</p>
                <p style="text-align: center;">感谢您为我们提出宝贵的意见和建议以及对我们工作的支持！</p>
            </div>
        </template>
    </div>
</template>

<script>
import { cxjOpinionCollection } from '@/api/manage.js'
export default {
    name: 'OpinionCollection',
    data() {
        return {
            ruleForm: {
                dlaqyjzjLb: "重大政策",
            },
            ipAddress: '',
            isSuccess: false,
        }
    },
    mounted() {
        let year = new Date().getFullYear();
        fetch(`https://${year}.ip138.com/`)
            .then(x => x.text())
            .then(h => {
                let domParser = new DOMParser();
                let doc = domParser.parseFromString(h, "text/html");
                let text = doc.querySelector('p').innerText.trim();
                // 通过正则表达式匹配IP地址部分（简单的IP地址格式匹配示例，可根据实际情况调整更精准）
                let ipMatch = text.match(/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/);
                if (ipMatch) {
                    console.log(ipMatch[0]);
                    this.ipAddress = ipMatch[0];
                } else {
                    console.log("未匹配到IP地址");
                }
            })
            .catch(err => {
                console.error("获取信息出现错误：", err);
            });
    },
    methods: {
        handleSubmit() {
            if (!this.ruleForm.dlaqyjzjXm) {
                this.$message.error('请输入姓名');
                return;
            }
            if (!this.ruleForm.dlaqyjzjSj) {
                this.$message.error('请输入电话号码');
                return;
            }
            if (!this.ruleForm.dlaqyjzjLb) {
                this.$message.error('请选择类别');
                return;
            }
            if (!this.ruleForm.dlaqyjzjBt) {
                this.$message.error('请输入标题');
                return;
            }
            if (!this.ruleForm.dlaqyjzjJy) {
                this.$message.error('请输入意见');
                return;
            }
            this.ruleForm.ipdz = this.ipAddress;
            cxjOpinionCollection(this.ruleForm).then(res=>{
                if (res.code == 200) {
                    this.$message.success(res.result)
                    this.isSuccess = true;
                } else {
                    this.$message.error(res.message)
                    this.isSuccess = false;
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.opinionCollection {
    height: 100%;
    width: 760px;
    margin: 80px auto;
}
.opinionDescription {
    background-color: #d1ebf6;
    padding: 15px;
    span {
        display: flex;
        justify-content: center;
        align-items: center;
        b {
            font-size: 18px;
        }
        img {
            margin-left: 10px;
        }
    }
    p {
        font-size: 14px;
        text-indent: 2em;
        margin-top: 10px;
    }
}
table {
    margin-top: 20px;
    .label {
        width: 110px;
        padding: 0 10px;
        text-align: right;
        border: 1px solid #d9d9d9;
        span {
            color: #f5222d;
            display: inline-block;
            width: 14px;
        }
    }
    tr {
        min-height: 50px;
        line-height: 50px;
        border: 1px solid #d9d9d9;
        input, textarea {
            border-radius: 0;
        }
    }
    td {
        width: 270px;
        padding: 0 10px;
        input {
            border-radius: 0;
        }
    }
    .dlaqyjzjJy {
        height: 260px !important;
    }
}
.submit {
    margin: 20px auto;
    width: 65%;
    height: 54px;
    background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    span {
        font-size: 22px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        color: #FFFFFF;
    }
}
.mobileTable {
    display: none;
}
@media screen and (max-width: 768px) {
    .opinionCollection {
        width: 95%;
        margin: 25px auto;
        padding-bottom: 5px;
    }
    .pcTable {
        display: none;
    }
    .mobileTable {
        display: block;
        width: 100%;
        tr {
            width: 100%;
            display: flex;
            border: 1px solid #d9d9d9;
            border-bottom: 0;
            min-height: 50px;
            &:last-child {
                border-bottom: 1px solid #d9d9d9;
                // height: 300px;
            }
        }
        td {
            flex: 1;
        }
        .label {
            border: 0;
            border-right: 1px solid #d9d9d9;
        }
    }
}
.success {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
        margin: 20px 0;
        width: 120px;
    }
    p {
        font-size: 22px;
        margin-left: 20px;
    }
}
</style>